<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>节流与防抖</title>
	<style>
		body {
			min-height: 3000px;
			width: 100%;
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<div id="main">
		<p>函数节流是指一定时间内js方法只跑一次。就像技能cd，你再怎么摁一段时间只能触发一次。这是函数节流最形象的解释。</p>
		<p>函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。</p>
		<p>滚动滚轮感受节流</p>
	</div>
	
	<script>				//节流	
		//主要思想是设置一个守卫，如果settimeout已经执行过了（在等待回调了），就不会创建新的settimeout
		var count = 0,
			main = document.getElementById('main');

		var scrollFun =  function(time) { 
			var canRun = true;
			return function() {
				if(canRun) {
					canRun = false;
					setTimeout(() => {
						main.innerHTML += "<p>第" + ++count + "行</p>";
						console.log("发生了!");
						canRun = true;
					}, time); 
				}
			};
		}

		window.onscroll = scrollFun(300);
		
		// 节流函数
		function throttle(fn, gapTime) {
		  let _lastTime = null;

		  return function () {
		    let _nowTime = + new Date()
		    if (_nowTime - _lastTime > gapTime || !_lastTime) {
		      fn();
		      _lastTime = _nowTime
		    }
		  }
		}
		// 触发
		let fn = ()=>{
		  console.log('boom')
		}

		setInterval(throttle(fn,1000),10)

	</script>


	<!-- <script>				//防抖
		//主要思想是如果频繁触发就取消上一个，重新创建一个规定时长的settimeout
		var count = 0,
			main = document.getElementById('main');

		var debounce = function(time) {
			var setTimeId = null;

			return function() {
				clearTimeout(setTimeId);
				setTimeId = setTimeout(() => {
					main.innerHTML += "<p>第" + ++count + "行</p>";
					console.log("发生了!");
				}, time);	
			}
		}

		window.onscroll = debounce(30);


		//防抖函数
		const debounce = (fn, time) => {
		    let timerId;
		    return function(...args) {
		        const functionCall = () => fn.apply(this, args);
		        clearTimeout(timerId);
		        timerId = setTimeout(functionCall, time);
		    };
		};
	</script> -->
</body>
</html>
